<template>
  <div class="w-full h-[700px] bg-white p-[20px] rounded-2xl">
    <div class="font-extrabold text-3xl mb-[20px]">数据列表</div>
    <a-table
      :dataSource="userInfo"
      :columns="columns"
      :scroll="{
        y: 500,
      }"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="paginationChange"
    >
      <template #bodyCell="{ column }">
        <template v-if="column.key === 'action'">
          <span>
            <a-button>caozuo</a-button>
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import type { DataSource, SearchConditions } from '../types/types'
import type { PaginationConfig } from 'ant-design-vue/es/pagination'

interface Columns {
  title: string
  dataIndex: string
  key: string
}

interface Props {
  loading: boolean
  userInfo: DataSource[]
  total: number
  searchConditions: SearchConditions
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  total: 0,
  userInfo: () => [],
})

const emit = defineEmits<{
  (e: 'update:loading', value: boolean): void
  (e: 'handlePaginationChange', value: { page: number; page_size: number }): void
}>()

const pagination = ref<PaginationConfig>({
  total: props.total,
  current: 1,
  pageSize: 10,
  showQuickJumper: true,
})

watch(
  () => props.searchConditions,
  (newVal) => {
    pagination.value.current = newVal.page
    pagination.value.pageSize = newVal.page_size
  },
  { deep: true },
)

const paginationChange = (event: PaginationConfig) => {
  emit('handlePaginationChange', { page: event.current!, page_size: event.pageSize! })
}

watch(
  () => props.loading,
  (newVal) => {
    emit('update:loading', newVal)
  },
)

watch(
  () => props.total,
  (newVal) => {
    pagination.value.total = newVal
  },
)

const columns = ref<Columns[]>([
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
  },
])
</script>
<style lang="scss" scoped></style>
